<template>
  <div class="je-vue-pagebar je-board-home">
    <je-button :disabled="page == 1" class="prev" size="mini" @click="prevPage">
      {{ info.prev }}
    </je-button>
    <je-button :disabled="totalPage <= page" class="next" size="mini" @click="nextPage">
      {{ info.next }}
    </je-button>
    <span class="movepage"
      >{{ info.go }}
      <je-input-number v-model:value="page" :min="1" :max="totalPage" />
      / {{ totalPage }} {{ info.page }}</span
    >
    <i v-show="showRefresh" class="jeicon jeicon-refresh refresh" @click="refresh" />
    <span class="dispaly-text">{{ displayText }}</span>
  </div>
</template>

<script>
  import {
    defineComponent,
    computed,
    reactive,
    toRefs,
    onBeforeMount,
    onMounted,
    watch,
  } from 'vue';
  import { useI18n } from '@common/locales';
  import { InputNumber, Button } from '@jecloud/ui';
  export default defineComponent({
    name: 'JePagebar',
    components: {
      JeButton: Button,
      JeInputNumber: InputNumber,
    },
    props: {
      pageSize: {
        type: Number,
        default: 10,
      },
      totalCount: {
        type: Number,
        default: 0,
      },
      showRefresh: {
        type: Boolean,
        default: true,
      },
    },
    emits: ['load', 'changePageNumber'],
    setup(props, { emit }) {
      const t = useI18n().t;
      const state = reactive({
        page: 1, //页码
        lang: 'zh_CN',
        info: {
          prev: t('developBoard.prev'),
          next: t('developBoard.next'),
          go: t('developBoard.go'),
          page: t('developBoard.page'),
        },
      });
      const start = computed(() => {
        // 每页开始条数
        return (state.page - 1) * props.pageSize;
      });
      const end = computed(() => {
        // 每页结束条数
        const endNum = start.value + props.pageSize;
        return (endNum > props.totalCount ? props.totalCount : endNum) - 1;
      });
      const totalPage = computed(() => {
        // 总页数
        return (
          parseInt(props.totalCount / props.pageSize) +
          (props.totalCount % props.pageSize > 0 ? 1 : 0)
        );
      });
      const displayText = computed(() => {
        // 显示信息
        if (props.totalCount == 0) {
          return state.lang == 'zh_CN' ? '没有数据' : 'no data';
        }
        if (state.lang == 'zh_CN') {
          return `本页 ${start.value + 1}-${end.value + 1} 条,共 ${props.totalCount} 条`;
        }
        return `This page ${start.value + 1}-${end.value + 1}, total ${props.totalCount}`;
      });
      watch(
        () => state.page,
        (nv) => {
          if (nv < 1) {
            state.page = 1;
          } else if (nv > totalPage.value) {
            state.page = totalPage.value;
          } else if (nv) {
            methods.movePage(nv);
          }
        },
      );
      watch(
        () => props.pageSize,
        () => {
          state.page = 1;
          methods.movePage(state.page);
        },
      );
      watch(
        () => props.totalCount,
        () => {
          state.page = 1;
          methods.movePage(state.page);
        },
      );
      const methods = {
        /**
         * 分页信息
         */
        getPageInfo() {
          return {
            start: start.value,
            end: end.value,
            limit: props.pageSize,
            page: state.page,
            totalPage: totalPage.value,
            totalCount: props.totalCount,
          };
        },
        /**
         * 加载数据
         */
        movePage(page) {
          if (!page) {
            state.page = 1;
            // me.totalCount = 0;
          } else {
            state.page =
              page < 1 ? 1 : page > totalPage.value && totalPage.value > 0 ? totalPage.value : page;
          }
          emit('load', methods.getPageInfo());
        },
        /**
         * 上页
         */
        prevPage() {
          state.page--;
          emit('changePageNumber', 'reduce');
        },
        /**
         * 下页
         */
        nextPage() {
          state.page++;
          emit('changePageNumber', 'add');
        },
        /**
         * 首页
         */
        firstPage() {
          state.page = 1;
          emit('changePageNumber', '1');
        },
        /**
         * 末页
         */
        lastPage() {
          state.page = totalPage.value;
          emit('changePageNumber', 'end');
        },
        /**
         * 刷新
         */
        refresh() {
          methods.movePage(state.page);
          emit('changePageNumber', 'refresh');
        },
      };
      onBeforeMount(() => {});
      onMounted(() => {});
      return {
        totalPage,
        displayText,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .je-vue-pagebar .ant-input-number-input-wrap,
  .je-vue-pagebar .ant-input-number-input {
    height: 100%;
    min-height: 26px;
  }
  .je-vue-pagebar .ant-input-number-input-wrap .ant-input-number-input {
    display: block;
    height: 26px;
  }
  .je-vue-pagebar .ant-input-number {
    height: 26px;
    line-height: 26px;
    box-sizing: border-box;
  }
  .je-vue-pagebar .ant-btn {
    height: 26px;
    line-height: 26px;
    padding: 0 15px;
    margin-right: 10px;
  }
  .je-vue-pagebar .ant-btn span {
    display: block;
    line-height: 26px;
  }
</style>
<style scoped lang="less">
  .je-vue-pagebar {
    height: 26px;
    line-height: 26px;
    color: #808080;
    .dispaly-text {
      float: right;
      font-size: 14px;
      color: #3f3f3f;
    }
    .refresh {
      font-size: 14px;
      cursor: pointer;
    }
    .movepage {
      margin-right: 10px;
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      color: #3f3f3f;
      .ant-input-number {
        width: 60px;
        margin: 0 5px;
        .ant-input-number-input {
          height: 26px !important;
          line-height: 26px !important;
          font-size: 14px;
          text-align: center;
        }
      }
    }
  }
</style>
